<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <p>count的值是：{{count}}</p>
        <p>count 是一个 {{msg}}</p>
        <p>计算属性 {{message}}</p>

        <button @click="change"> 点击改变 count </button>
    </div>
</body>
<!-- 
    计算属性是可以通过一些值，经过各种计算，最后得到一个最终结果
    计算属性具有缓存功能，会将上一次的值缓存起来，只有被缓存的
    值发生了变化才会重新计算
 -->
<script>
    const app = {
        data() {
            return {
                count: 1,
                msg: '奇数',
                name: '张三'
            }
        },
        methods: {
            change() {
                this.count = Math.floor(Math.random() * 2)

                // 调用计算的函数
                this.showMsg()
            },
            showMsg() {
                // 专门用来判断奇数还是偶数的方法
                this.msg = this.count ? '奇数' : '偶数'

                console.log('函数被调用了');
            }
        },
        // 该选项是用来放 计算属性 的地方
        computed: {
            message() {
                /*
                    this.count 值发生变化后会执行 message 函数进行计算
                    如果当前值和上一次的值相同，该方法不会被执行。
                    相当于 this.count 被监听了，只有变化的时候才会被执行
                    计算属性的特点：
                    1、计算属性是有缓存的。
                    2、计算属性运行会立即执行一次。
                    3、如果计算属性中使用到了多个属性，那么这些属性都会被监听。只要这些属性
                        有一个发生变化，那么该计算属性就会被执行
                    4、计算属性中一定要有一个 return，因为咱们得计算得出一个结果
                    5、计算属性是多个值影响一个值
                */


                console.log('计算属性被调用了' + this.name);
                return this.count ? '奇数' : '偶数'
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>

<!-- 
    通过计算属性根据出生年份计算得到年龄

 -->